/**
 * 获取状态栏的高度，无单位
 */
export const useStatusHeight = () => {
	const { statusBarHeight } = uni.getSystemInfoSync()
	return statusBarHeight
}

/**
 * 获取 （胶囊按钮 + 上下两边距离） 的高度，无单位
 */
export const useMenuButtonHeight = () => {
	// #ifdef MP-WEIXIN
	const { statusBarHeight } = uni.getSystemInfoSync()
	const { top, height } = uni.getMenuButtonBoundingClientRect()
	return (top - statusBarHeight) * 2 + height
	// #endif

	// #ifdef H5
	return 44
	// #endif
}

/**
 * 获取头部总高度，状态栏 + 胶囊按钮高度，无单位
 */
export const useHeaderHeight = () => {
	return useStatusHeight() + useMenuButtonHeight()
}

/**
 * 头部所有的高度，单位：px
 */
export const useNavBarStyle = () => {
	const statusBarHeight = useStatusHeight() + "px"
	const titleBarHeight = useMenuButtonHeight() + "px"
	const headerHeight = useHeaderHeight() + "px"

	return {
		statusBarHeight,
		titleBarHeight,
		headerHeight
	}
}

/**
 * 配置默认的tabbar情况下，获取到的body可用高度，单位：px
 */
export const useBodyHeight = () => {
	let bodyHeight = 0
	const headerHeight = useHeaderHeight()

	// 默认的 tabbar 高度在pages.json tabbar 中的 "height": "50px", 使用了一个 ::after 的伪类来撑开的
	// #ifdef H5
	bodyHeight = `calc(100vh - ${headerHeight}px - 50px)`
	// #endif

	// #ifndef H5
	bodyHeight = `calc(100vh - ${headerHeight}px)`
	// #endif

	return bodyHeight
}

/**
 * 胶囊按钮的相关样式
 */
export const useMenuButtonStyle = () => {
	// #ifdef MP-WEIXIN
	const { height, width } = uni.getMenuButtonBoundingClientRect()
	return {
		buttonHeight: height + "px",
		buttonWidth: width + "px"
	}
	// #endif

	// #ifdef H5
	return {
		buttonHeight: "0px",
		buttonWidth: "0px"
	}
	// #endif
}
